<template>
	<view class="news-content">
		<view class="box">
			<view class="icon" v-for="item in iconList" :key="item.id">
				<view class="box-img">
					<image class="image" :src="item.src" mode=""></image>
				</view>
				<view class="icon-text">
					{{item.name}}
				</view>
			</view>
			
		</view>
		<view class="news-list">
			<view class="item" v-for="item in list" :key="item.id">
				<view class="author-img-box">
					<image class="author-img" src="../static/image/portrait.png" mode=""></image>
				</view>
				<view class="text">
					<view class="top">
						<view class="name">
							{{item.name}}
						</view>
						<view class="time">
							{{item.time}}
						</view>
					</view>
					<view class="content">
						{{item.content}}
					</view>
				</view>

			</view>
			
		</view>
		<view class="more">
			无更多消息
		</view>
	</view>
</template>

<script>
	export default {
		props:['list'],
		data() {
			return {
				iconList:[
					{
						id:1,
						src:'../static/image/fans.jpg',
						name:'粉丝'
					},{
						id:1,
						src:'../static/image/love.jpg',
						name:'点赞'      
					},{
						id:1,
						src:'../static/image/comment.jpg',
						name:'评论和@'
					},{
						id:1,
						src:'../static/image/dong.jpg',
						name:'随拍互动'
					}
				]
			};
		}
	}
</script>

<style lang="scss">
	.news-content {
		color: #ffffff;
		background-color: #000000;
		width: 100%;
		padding-bottom: 55px;
		.box {
			width: 100%;
			height: 120px;
			display: flex;
			margin-top: 25px;

			.icon {
				flex: 1;

				.box-img {
					margin: 0 auto;
					width: 38px;

					.image {
						width: 38px;
						height: 38px;
						border-radius: 5px;
					}
				}

				.icon-text {
					text-align: center;
					font-size: 12px;
					color: #eee;
					margin-top: 6px;
				}
			}
		}

		.news-list {
			.item {
				height: 60px;
				padding: 15px 8px;

				.author-img-box {
					float: left;
					margin-left: 10px;

					.author-img {
						width: 45px;
						height: 45px;
						border-radius: 50%;
					}
				}

				.text {
					float: left;
					margin-left: 15px;
					height: 50px;
					width: 75%;

					.top {
						width: 100%;
						height: 25px;

						.name {
							float: left;
							font-size: 16px;
						}

						.time {
							float: right;
							font-size: 11px;
							color: #aaaaaa;
						}
					}

					.content {
						width: 100%;
						height: 25px;
						line-height: 25px;
						font-size: 13px;
						color: #aaaaaa;
						float: left;
						overflow: hidden;
					}
				}
			}
		}
	}

	.more {
		height: 50px;
		line-height: 50px;
		font-size: 12px;
		text-align: center;
		color: #bbbbbb;
	}
</style>
